<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>箭头函数 this 指向问题</h1>

    <button>点我看看</button>
    <script>

        // window：对象是顶级对象
        // 在 js 中，定义的属性和方法默认会绑定到 window 对象中

        function aa() {
            console.log("测试...");
        }

        //aa() ;
        //window.aa() ;



        var obj = {
            name:'测试',

            // 传统函数
            fun1 : function() {
                // 这里的this，根据调用此方法动态绑定的，由其调用的上下文決定this关键字的指向
                // 即，谁调用fun1方法，this表示的就是谁
                console.log(this);
            } ,

            // 箭头函数
            // 定义箭头函数时，如果没有指定定义具体的对象时，则默认定义在 window 对象中
            fun2 : () => {
                // 箭头函数不动态绑定this,在这里，fun2函数定义的位置上下文中，
                // 当前对象指定的是window对象
                console.log(this);
            }
        }

        // this指的是obj对象
        // obj.fun1() ;
        
        // this指的是window对象
        // obj.fun2() ;
        
        // this指的是button对象
        // document.querySelector("button").onclick = obj.fun2 ;

        // 注意：不能通过call方法的调用，改变this的指向
        // obj.fun2.call({name:'zs'}) ;

        // 注意：我们可以通过修改箭头函数上下文对象来改变this的指向

        
        
      





    </script>
</body>
</html>